<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript">
    require([ "dojo/_base/array", "dojo/_base/xhr", "dojo/request", "dojo/topic", "dojo/json" ], function(array, xhr,
            request, topic, JSON) {
        var deletItemsCount = 0;
        sysroleRestForm = function(formId) {
            dijit.byId(formId).reset();
            if (formId.indexOf('UFD') != -1) {
                var rowid = jQuery("#sysroleGird").jqGrid('getGridParam', 'selrow');
                var sysuser = jQuery("#sysroleGird").jqGrid('getRowData', rowid);
                dijit.byId('sysroleUFD').setValues(sysuser);
            }
        };
        topic.subscribe("sysrole/insertOrUpdate", sysroleRestForm);
        var syncDB = function(url, jsonData) {
            request.post(url, {
                data : jsonData,
                headers : {
                    'Content-Type' : "application/json; charset=utf-8"
                },
                timeout : 30000
            }).then(function(response) {
                topic.publish("notifyMsgTopic", {
                    message : response,
                    type : "message",
                    duration : 1000
                });
                var currentPage = jQuery('#sysroleGird').jqGrid('getGridParam', 'page');
                var pageSize = jQuery('#sysroleGird').jqGrid('getGridParam', 'rowNum');
                var totalCount = jQuery('#sysroleGird').jqGrid('getGridParam', 'records') - deletItemsCount;
                var totalPages = Math.ceil(totalCount / pageSize);
                jQuery("#sysroleGird").jqGrid('setGridParam', {
                    page : currentPage > totalPages ? totalPages : currentPage
                }).trigger("reloadGrid");
            }, function(error) {
                alert(error);
            });
        };
        sysroleSubmitForm = function(formId, type) {
            var url = "sysrole/insert";
            if (type == 'u') {
                url = "sysrole/update";
            }
            var form = dijit.byId(formId);
            if (form.isValid()) {
                var json = JSON.stringify(form.getValues());
                syncDB(url, json);
                form.hide();
                topic.publish("sysrole/insertOrUpdate", formId);
            } else {
                form.validate();
            }
        };
        sysroleDelete = function() {
            var ids = jQuery("#sysroleGird").jqGrid('getGridParam', 'selarrrow') || [];
            deletItemsCount = ids.length;
            if (ids.length > 0) {
                if (confirm('确认删除所选定的项？')) {
                    var sysrole = {};
                    sysrole.id = '';
                    array.forEach(ids, function(entry, i) {
                        sysrole.id += entry + ",";
                    });
                    syncDB("sysrole/delete", JSON.stringify(sysrole));
                }
            } else {
                alert('请选择至少一条数据!');
            }
        };
        sysroleQuery = function(formId) {
            var sysrole = dijit.byId(formId).getValues();
            jQuery("#sysroleGird").jqGrid('setGridParam', {
                postData : sysrole
            }).trigger('reloadGrid');
        };
    });
</script>
<div data-dojo-type="dijit/Dialog" id="sysroleIFD" title="新增">
  <div class="dijitDialogPaneContentArea">
    <table>
      <tr>
        <td><label for="roleName">角色名称: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="roleName"></td>
      </tr>
      <tr>
        <td><label for="description">描述: </label></td>
        <td><input data-dojo-type="dijit/form/Textarea" data-dojo-props="trim:true" type="textarea"
          name="description"></td>
      </tr>
    </table>
  </div>
  <div class="dijitDialogPaneActionBar">
    <button data-dojo-type="dijit/form/Button" type="button" onclick="sysroleSubmitForm('sysroleIFD','i')">保存</button>
    <button data-dojo-type="dijit/form/Button" type="button" onclick="sysroleRestForm('sysroleIFD');">重置</button>
  </div>
</div>
<div data-dojo-type="dijit/Dialog" id="sysroleUFD" title="更新">
  <div class="dijitDialogPaneContentArea">
    <input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, readOnly: true" type="text"
      name="roleId" style="display: none;">
    <table>
      <tr>
        <td><label for="roleName">角色名称: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="roleName"></td>
      </tr>
      <tr>
        <td><label for="description">描述: </label></td>
        <td><input data-dojo-type="dijit/form/Textarea" data-dojo-props="trim:true" type="textarea"
          name="description"></td>
      </tr>
    </table>
  </div>
  <div class="dijitDialogPaneActionBar">
    <button data-dojo-type="dijit/form/Button" type="button" onclick="sysroleSubmitForm('sysroleUFD','u')">保存</button>
    <button data-dojo-type="dijit/form/Button" type="button" onclick="sysroleRestForm('sysroleUFD');">重置</button>
  </div>
</div>
<fieldset>
  <legend>&nbsp;&nbsp;信息选项&nbsp;&nbsp;</legend>
  <form id="querySysRoleForm" data-dojo-type="dijit/form/Form" method="post">
    <div style="margin-left: 5px;">
      <table>
        <tr>
          <td><label for="roleName">角色名称: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="roleName"></td>
        </tr>
      </table>
    </div>
  </form>
  <div style="padding: 5px;">
    <button id="sysroleInsertBtn" data-dojo-type="dijit/form/Button" type="submit" label="新增">
      <script type="dojo/method" event="onClick" args="evt">
        dijit.byId('sysroleIFD').show();
      </script>
    </button>
    <button id="sysroleDeleteBtn" data-dojo-type="dijit/form/Button" type="button" label="删除" onclick="sysroleDelete();"></button>
    <button id="sysroleUpdateBtn" data-dojo-type="dijit/form/Button" type="button" label="更新">
      <script type="dojo/method" event="onClick" args="evt">
        var ids = jQuery("#sysroleGird").jqGrid('getGridParam', 'selarrrow') || [];
        if (ids.length != 1) {
          alert('每次只能修改一条数据!');
        }else{
          var sysrole = jQuery("#sysroleGird").jqGrid('getRowData', ids[0]);
          dijit.byId('sysroleUFD').setValues(sysrole);
          dijit.byId('sysroleUFD').show();
        }
      </script>
    </button>
    <button id="sysroleQueryBtn" data-dojo-type="dijit/form/Button" type="button" label="查询"
      onclick="sysroleQuery('querySysRoleForm');"></button>
  </div>
</fieldset>
<div id="gird">
  <table id="sysroleGird"></table>
  <div id="sysroleToolbar"></div>
</div>
<script type="text/javascript">
    jQuery("#sysroleGird").jqGrid({
        url : 'sysrole/queryAsList',
        datatype : "json",
        autowidth : true,
        rownumbers : true,
        height : 'auto',
        colNames : [ 'ID', '角色名称', '描述' ],
        colModel : [ {
            name : 'roleId',
            index : 'roleId',
            width : 60,
            key : true,
            hidden : true,
            align : 'center'
        }, {
            name : 'roleName',
            index : 'roleName',
            width : 100
        }, {
            name : 'description',
            index : 'description',
            width : 520
        } ],
        rowNum : 15,
        rowList : [ 15, 20, 25, 30 ],
        pager : '#sysroleToolbar',
        //sortname : 'roleName',
        recordpos : 'right',
        viewrecords : true,
        sortorder : "desc",
        jsonReader : {
            repeatitems : false,
            id : "0"
        },
        multiselect : true,
        shrinkToFit : false,
        caption : "角色列表"
    });
    jQuery("#sysroleGird").jqGrid('navGrid', '#sysroleToolbar', {
        edit : false,
        add : false,
        del : false,
        search : false,
        refresh : true
    });
</script>
